<template>
  <div class="page">
    <div class="aa">
      <ul>
        <li v-if="this.$store.state.isLogin === true">
          欢迎，{{ this.$store.state.username }}
        </li>
        <li v-if="this.$store.state.isLogin === false"></li>
        <li v-if="this.$store.state.isLogin === true" @click="outLogin()">
          退出登录
        </li>
        <li v-if="this.$store.state.isLogin === false" @click="gotoLogin()">
          <i class="el-icon-user-solid"></i>&nbsp;&nbsp;&nbsp;&nbsp;登录
        </li>
        <li v-show="this.$store.state.ifyanzheng === false" @click="changedraw"><i
            class="el-icon-key"></i>&nbsp;&nbsp;&nbsp;&nbsp;认证</li>
        <li v-show="this.$store.state.ifyanzheng === true"><i
            class="el-icon-key"></i>&nbsp;&nbsp;&nbsp;&nbsp;已认证
        </li>
      </ul>
      <el-drawer title="身份认证" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
        <renzheng></renzheng>
      </el-drawer>
    </div>
    <div class="inf">
      <p style="font-size:22px; color:#409EFF; opacity: 0.6"><i class="el-icon-user-solid"></i>Hi~{{this.$store.state.username}}</p>
      <PersonalChoosePad style="float: left; margin-top:1em" @padchoice="GetShowItem"></PersonalChoosePad>
      <div class="upper-class">
        <p :style="{'color': GetColor1}" style="opacity: 0.7">个人首页</p>
        <p :style="{'color': GetColor2}" style="opacity: 0.7">我的收藏</p>
        <p :style="{'color': GetColor5}" style="opacity: 0.7">关注学者</p>
        <p :style="{'color': GetColor3}" style="opacity: 0.7">消息中心</p>
        <p :style="{'color': GetColor4}" style="opacity: 0.7">最近浏览</p>
      </div>
      <br/>
      <br/>
      <br/>
      <br/>
      <!--
      <PersonalMsg style="margin-left:38%; margin-top: 4%" v-show="msg === true"></PersonalMsg>
      <PersonalCollection style="margin-left:38%" v-show="collection === true" :item_show="show_num"></PersonalCollection>
      -->
      <PersonalMsg style="margin-left:38%; margin-top: 2%" v-show="GetShowNum() === '1'"></PersonalMsg>
      <PersonalCollection style="margin-left:38%" v-show="GetShowNum() === '2'" :item_show="show_num"></PersonalCollection>
      <PersonalFollow_Author style="margin-left:38%" v-show="GetShowNum() === '5'"></PersonalFollow_Author>
      <PersonalNotice style="margin-left:38%" v-show="GetShowNum() === '3'"></PersonalNotice>
      <PersonalRecent style="margin-left:38%" v-show="GetShowNum() === '4'"></PersonalRecent>
    </div>
  </div>
</template>

<script>
import PersonalHeader from './Border'
import PersonalMsg from './personalmsg'
import PersonalCollection from './personalcollection'
import PersonalChoosePad from './personalchoosepad'
import PersonalNotice from './personalnotice'
import PersonalRecent from './personalrecent'
import renzheng from "../renzheng";
import PersonalFollow_Author from './personalfollow_author';
export default {
  name: "personalpage",
  components: {
    PersonalHeader,
    PersonalMsg,
    PersonalCollection,
    PersonalChoosePad,
    PersonalNotice,
    PersonalRecent,
    renzheng,
    PersonalFollow_Author
  },
  computed:{
    GetColor1:function(){
      return this.menucolor1;
    },
    GetColor2:function(){
      return this.menucolor2;
    },
    GetColor3:function(){
      return this.menucolor3;
    },
    GetColor4:function(){
      return this.menucolor4;
    },
    GetColor5:function(){
      return this.menucolor5;
    }
  },
  mounted(){
    this.SetColor();
  },
  data() {
    return{
      activeIndex: '1',
      msg: true,
      collection: false,
      inf: false,
      review: false,
      show_num: "",
      menucolor1: "black",
      menucolor2: "black",
      menucolor3: "black",
      menucolor4: "black",
      menucolor5: "black",
      direction: 'rtl',
      drawer: false,
    }
  },
  methods:{
    getCookie(name) {
				var value = '; ' + document.cookie;
				var parts = value.split('; ' + name + '=');
				if (parts.length === 2) return parts.pop().split(';').shift();
			},
    	gotoHome(){
					this.$router.push('/') 
           this.$store.state.isLogin = false;
      this.$store.state.ifyanzheng = false;
        this.$store.state.username = "";
			},
  
    changedraw() {
      if (this.$store.state.isLogin === false) {
        this.$message('您尚未登录，请先登录')
      } else {
        this.drawer = !this.drawer
      }

    },
    SetColor(){
      switch (localStorage.getItem("show_num")){
        case "1": this.menucolor1 = "#409EFF";
          this.menucolor2 = "black";
          this.menucolor3 = "black";
          this.menucolor4 = "black";
          this.menucolor5 = "black";
          break;
        case "2": this.menucolor1 = "black";
          this.menucolor2 = "#409EFF";
          this.menucolor3 = "black";
          this.menucolor4 = "black";
          break;
        case "3": this.menucolor1 = "black";
          this.menucolor2 = "black";
          this.menucolor3 = "#409EFF"
          this.menucolor4 = "black";
          this.menucolor5 = "black";
          break;
        case "4": this.menucolor1 = "black";
          this.menucolor2 = "black";
          this.menucolor3 = "black"
          this.menucolor4 = "#409EFF";
          this.menucolor5 = "black";
          break;
        case "5": this.menucolor1 = "black";
          this.menucolor2 = "black";
          this.menucolor3 = "black"
          this.menucolor4 = "black";
          this.menucolor5 = "#409EFF";
          break;
      }
    },
    GetShowItem(v){
      this.show_num = v;
      if(this.show_num === '1'){
        localStorage.setItem("show_num", "1");
        this.menucolor1 = "#409EFF";
        this.menucolor2 = "black";
        this.menucolor3 = "black";
        this.menucolor4 = "black";
        this.menucolor5 = "black";
      }
      else if(this.show_num === '2'){
        localStorage.setItem("show_num", "2");
        this.menucolor1 = "black";
        this.menucolor2 = "#409EFF";
        this.menucolor3 = "black";
        this.menucolor4 = "black";
        this.menucolor5 = "black";
      }
      else if(this.show_num === '3'){
        localStorage.setItem("show_num", "3");
        this.menucolor1 = "black";
        this.menucolor2 = "black";
        this.menucolor3 = "#409EFF"
        this.menucolor4 = "black";
        this.menucolor5 = "black";
      }
      else if(this.show_num === '4'){
        localStorage.setItem("show_num", "4");
        this.menucolor1 = "black";
        this.menucolor2 = "black";
        this.menucolor3 = "black";
        this.menucolor4 = "#409EFF";
        this.menucolor5 = "black";
      }
      else{
        localStorage.setItem("show_num", "5");
        this.menucolor1 = "black";
        this.menucolor2 = "black";
        this.menucolor3 = "black";
        this.menucolor4 = "black";
        this.menucolor5 = "#409EFF";
      }
    },
    GetShowNum(){
      return localStorage.getItem("show_num");
    },
    gotoLogin() {
      this.$router.push("/login");
    },
    outLogin() {
      
      const self = this;
      this.isLogin = false;
      (this.$store.username = ""),
          (this.$store.useremail = ""),
          (this.$store.userphone = ""),
          self.axios({
            method: "post",
            url: "/outlogin/",
            data: {
              username: this.$store.state.username,
            },
            headers: {
              "X-CSRFToken": this.getCookie("csrftoken"),
            },
          })
           
           this.gotoHome()
       
     
    },
    
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
  }
}
</script>

<style scoped>
.page{
  width:70em;
  margin: 0 auto;
}
.inf{
  margin-top:3%;
}
.person_inf{
  margin-top:20%;
}
.upper-class{
  margin-top:1em;
  float: right;
  width: 50em;
}
.upper-class p{
  float:left;
  margin-left:5em;
}
.aa {
  /* background-color: green; */
  /* opacity: 0.5; */
  height: 60px;
  width: 100%;
  /* top:0;
  position: fixed; */
  /* border: solid ; */
  color: #fff;
  background-color:#409EFF;
  align-items: center;
  display: flex;
  opacity:0.4;
}
.aa ul{
  margin-left:50%;
}
.aa li{
  display: inline-block;
}
</style>